<template>
  <!--加盟合作-->
  <div class="">
    <!--pc page-->
    <div class="pc_agent_page">
      <messageBoard></messageBoard>
      <!--banner-->
      <div class="banner_agent">
        <img src="http://image.xuemei99.com/banner_jiameng_new.jpg" alt="">
        <button type="button" class="banner_agent_btn" data-toggle="modal" data-target="#myModal"></button>
      </div>
      <!--加盟权益 interests-->
      <div class="join_interests">
        <div class="width_1108 margin_0_auto">
          <p class="font_28">学妹加盟商权益</p>
          <div class="row interests_box">
            <div class="col-md-2 item_interests">
              <img src="http://image.xuemei99.com/product_icon_jiameng.png" alt="">
              <p>学妹产品礼包</p>
            </div>
            <div class="col-md-2 item_interests">
              <img src="http://image.xuemei99.com/peixun_icon_jiameng.png" alt="">
              <p>专业培训支持</p>
            </div>
            <div class="col-md-2 item_interests">
              <img src="http://image.xuemei99.com/yunying_icon_jiameng.png" alt="">
              <p>运营流程支持</p></div>
            <div class="col-md-2 item_interests">
              <img src="http://image.xuemei99.com/pinpai_icon_jiameng.png" alt="">
              <p>品牌推广支持</p></div>
            <div class="col-md-2 item_interests">
              <img src="http://image.xuemei99.com/qiye_icon_jiameng.png" alt="">
              <p>企业建设支持</p></div>
            <div class="col-md-2 item_interests">
              <img src="http://image.xuemei99.com/zhaoshang_icon_jiameng.png" alt="">
              <p>招商配合支持</p></div>
          </div>
        </div>
      </div>
      <!--加盟资质 aptitude-->
      <div class="jion_aptitude bg_F4F6F9">
        <div class="width_1108 margin_0_auto">
          <p class="font_28">学妹加盟商资质</p>
          <div class="aptitude_box margin_top_60 clear">
            <div class="item_aptitude bg_fff">
              <img src="http://image.xuemei99.com/gongsi_icon_jiameng.png" alt="">
              <p class="font_18 margin_top_16">具备公司资质</p>
              <p class="line_color margin_top_20"></p>
              <p class="font_14 col_666 margin_top_30 text-left">有法定营业执照，没有从事过违返国家法律法规的行为</p>
            </div>
            <div class="item_aptitude bg_fff">
              <img src="http://image.xuemei99.com/tuandui_icon_jiameng.png" alt="">
              <p class="font_18 margin_top_16">具备运营团队</p>
              <p class="line_color margin_top_20"></p>
              <p class="font_14 col_666 margin_top_30 text-left">有从事计算机，网络、营销三年以上从业经验，有运营团队</p>
            </div>
            <div class="item_aptitude bg_fff">
              <img src="http://image.xuemei99.com/kehu_icon_jiameng.png" alt="">
              <p class="font_18 margin_top_16">客户资源丰富</p>
              <p class="line_color margin_top_20"></p>
              <p class="font_14 col_666 margin_top_30 text-left">在当地有丰富的人脉资源和客户资源，熟悉当地线下门店市场</p>
            </div>
            <div class="item_aptitude bg_fff">
              <img src="http://image.xuemei99.com/wenhua_icon_jiameng.png" alt="">
              <p class="font_18 margin_top_16">认同学妹文化</p>
              <p class="line_color margin_top_20"></p>
              <p class="font_14 col_666 margin_top_30 text-left">认同学妹的企业文化和产品理念，愿意和学妹并肩长期合作</p>
            </div>
          </div>
        </div>
      </div>
      <!--加盟查询 counsel-->
      <div class="jion_counsel">
        <div class="width_1108 margin_0_auto">
          <p class="font_28">学妹加盟商查询</p>
          <!--搜索下拉框-->
          <div class="query_box">
            <div class="city_select_box">
              <select id="dfshop_store_province" name="dfshop_store_province" v-model="pc_province"></select>
              <span>-</span>
              <select id="dfshop_store_city" name="dfshop_store_city" v-model="pc_city"></select>
              <span>-</span>
              <select id="cmbArea" v-model="pc_cmbarea"></select>
              <button type="button" class="search_city_btn text-center col_fff" @click="searchAgent(pc_province,pc_city,pc_cmbarea)">查询</button>
            </div>

            <!--暂无加盟商-->
            <div class="no_agent_box col_666 font_18" v-if="none_agent">
              <p v-show="no_query">请选择位置信息后查询加盟商信息</p>
              <p v-show="!no_query">您查询的地区尚无加盟商信息,<br/>如有疑问可拨打咨询电话 021-67680297</p>
            </div>

            <!--显示查询结果-->
            <ul class="city_list_box margin_top_20 clear" v-for="(item,index) in city_arr" :key="index" v-else>
              <li class="text-left pointer">
                <div>
                  <img class="enterprise_img vertical_middle" src="http://image.xuemei99.com/company_icon_jiameng.png" alt="">
                  <p class="enterprise_name vertical_middle margin_left_10 font_18 single_line inline_block">{{item.title}}</p>
                </div>
                <p class="single_line margin_top_20">地址：<span>{{item.address}}</span></p>
                <p class="single_line margin_bottom_0">电话：<span>{{item.phone}}</span> <span class="margin_left_20">{{item.telephone}}</span></p>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <!--学妹加盟流程 flow-->
      <div class="join_flow">
        <div class="width_1108 col_fff margin_0_auto">
          <p class="font_28">学妹加盟流程</p>
          <div class="flow_box margin_top_60 clear">
            <div class="flow_img_box">
              <img src="http://image.xuemei99.com/apply_icon_jiameng.png" alt="">
              <p>加盟申请</p>
            </div>
            <div class="flow_right_icon"></div>
            <div class="flow_img_box">
              <img src="http://image.xuemei99.com/examine_icon_jiameng.png" alt="">
              <p>资质审核</p>
            </div>
            <div class="flow_right_icon"></div>
            <div class="flow_img_box">
              <img src="http://image.xuemei99.com/talk_icon_jiameng.png" alt="">
              <p>商务洽谈</p>
            </div>
            <div class="flow_right_icon"></div>
            <div class="flow_img_box">
              <img src="http://image.xuemei99.com/agreement_icon_jiameng.png" alt="">
              <p>签订协议</p>
            </div>
          </div>
          <div class="text-center margin_top_60">
            <button type="button" class="join_daili_btn bg_2577EF" data-toggle="modal" data-target="#myModal">申请成为加盟商</button>
          </div>
        </div>
      </div>
    </div>

    <!--mobile page-->
    <div class="mobile_agent_page">
      <!--banner-->
      <div class="mobile_product_banner mobile_agent_banner_bg">
        <div class="col_fff border_0">
          <p class="font_18 mobile_agent_banner_sm_title">新零售，新机遇</p>
          <div class="font_30 mobile_agent_banner_title">
            <p>学妹加盟商</p>
            <p class="">全国火热招募中</p>
          </div>
          <button type="button" class="bg_2577EF col_fff mobile_banner_btn" @click="mobile_shearch_agent_btn">申请成为加盟商</button>
        </div>
      </div>

      <!--学妹加盟商权益-->
      <div class="mobile_huoke_item mobile_huoke_sm_shop">
        <div class="padding_left_15 padding_right_15 item_title_box">
          <p class="font_20">学妹加盟商权益</p>
        </div>
        <img src="http://image.xuemei99.com/quanyi_pic_jiameng.png" alt="" class="margin_top_6">
      </div>

      <!--学妹加盟商资质-->
      <div class="bg_F4F6F9 mobile_huoke_item mobile_huoke_sm_shop">
        <div class="padding_left_15 padding_right_15 item_title_box">
          <p class="font_20">学妹加盟商资质</p>
        </div>
        <img src="http://image.xuemei99.com/zizhi_pic_jiameng.png" alt="" class="margin_top_6">
      </div>

      <!--学妹加盟商查询-->
      <div class="bg_fff mobile_agent_modal mobile_huoke_item mobile_huoke_sm_shop">
        <div class="padding_left_15 padding_right_15 item_title_box">
          <p class="font_20">学妹加盟商查询</p>
        </div>
        <div class="mobile_agent_modal_body">
          <div class="mobile_city_select">
            <select id="mobile_agent_province" name="mobile_agent_province" class="form-control" v-model="selected_province"></select>
            <span>-</span>
            <select id="mobile_agent_city" name="mobile_agent_city" class="form-control" v-model="selected_city"></select>
            <span>-</span>
            <select id="mobile_agent_cmbArea" class="form-control" v-model="selected_cmbarea"></select>
          </div>
          <button type="button" class="bg_2577EF col_fff margin_top_16 mobile_agent_search"
                  @click="searchAgent(selected_province,selected_city,selected_cmbarea)">
            查询
          </button>

          <!--无加盟商-->
          <div class="mobile_no_agent" v-if="mobile_no_agent">
            <p v-show="mobile_no_search_agent">请选择位置信息后查询加盟商信息</p>
            <div class="mobile_no_agent_txt" v-show="!mobile_no_search_agent">
              <p>您查询的地区尚无加盟商信息，</p>
              <p>如有疑问可拨打咨询电话</p>
              <p><a href="tel://021-67680297">021-67680297</a></p>
            </div>
          </div>

          <!--加盟商列表-->
          <ul class="margin_top_20 mobile_agent_list clear" v-else v-for="(item,index) in city_arr" :key="index">
            <li>
              <div class="mobile_agent_enterprise clear">
                <div class="float_left mobile_agent_logo"></div>
                <div class="float_left font_14 text-left multiline mobile_agent_name">{{item.title}}</div>
                <div class="margin_top_10 font_12 col_666">
                  <p class="single_line">地址:<span>{{item.address}}</span></p>
                  <p class="margin_0">电话：<span>{{item.phone}}</span><span class="margin_left_20">{{item.telephone}}</span></p>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>

      <!--学妹加盟流程-->
      <div class="mobile_huoke_item mobile_huoke_sm_shop mobile_huoke_open_item">
        <div class="padding_left_15 padding_right_15 col_fff item_title_box">
          <p class="font_20">学妹加盟流程</p>
        </div>
        <img src="http://image.xuemei99.com/liucheng_pic_jiameng.png" alt="" class="margin_top_20">
        <button type="button" class="bg_2577EF col_fff font_14 margin_top_30 to_kelianke_btn" @click="mobile_shearch_agent_btn">申请成为加盟商</button>
      </div>

    </div>

    <!--底部-->
    <Foot></Foot>

    <!--PC申请加盟模态框-->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content text-left join_modal_content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
              aria-hidden="true">&times;</span></button>
            <p class="modal-title font_20" id="myModalLabel">申请成为学妹加盟商</p>
          </div>
          <div class="modal-body agent_modal_body">
            <form class="form-horizontal">
              <div class="form-group clear">
                <label for="agent_name" class="control-label agent_label_title">申请人姓名<span class="col_2577EF v">*</span></label>
                <div class="agent_inp_box">
                  <input type="text" class="form-control" id="agent_name" placeholder="姓名" maxlength="10">
                </div>
              </div>
              <div class="form-group clear">
                <label for="agent_tel" class="control-label agent_label_title">申请人手机<span class="col_2577EF margin_left_2">*</span></label>
                <div class="agent_inp_box">
                  <input type="number" class="form-control" id="agent_tel" placeholder="手机号">
                </div>
              </div>
              <div class="form-group clear">
                <label for="agent_qrcode" class="control-label agent_label_title">短信验证码<span class="col_2577EF margin_left_2">*</span></label>
                <div class="agent_inp_box modal_qrcode_box">
                  <input type="number" class="form-control" id="agent_qrcode" placeholder="短信验证码 ">
                  <button type="button" class="bg_2577EF col_fff" @click="modal_qrcode_btn($event)">获取验证码</button>
                </div>
              </div>

              <div class="form-group clear">
                <label class="control-label agent_label_title">代理地区  </label>
                <div class="agent_inp_box">
                  <div class="modal_city_select">
                    <select id="modal_province" name="modal_province" class="form-control"></select>
                    <select id="modal_city" name="modal_city" class="margin_left_10 form-control"></select>
                    <select id="modal_cmbArea" class="margin_left_10 form-control"></select>
                  </div>
                </div>
              </div>

              <div class="form-group clear">
                <label for="agent_company" class="control-label agent_label_title">公司名称 </label>
                <div class="agent_inp_box">
                  <input type="text" class="form-control" id="agent_company" placeholder="公司名称" maxlength="30">
                </div>
              </div>
              <div class="text-center modal_sub_bottom">
                <button type="button" class="sub_modal_agent bg_2577EF col_fff font_14 margin_top_30" @click="sub_modal_form">提交申请</button>
                <div class="font_14 col_999 margin_top_10 text-left">
                  <p>提交申请后，我们会尽快与您联系。 </p>
                  <p>如有问题，请拨打电话：021-67680297</p>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>

    <!--mobile 加盟商申请弹出框-->
    <mobileAgentApply :mobile-mask="mobile_agent_apply_mask" v-on:close_agent_apply="close_agent_apply()"></mobileAgentApply>
  </div>
</template>

<script>
  import Foot from '@/components/foot/foot'
  import messageBoard from '@/components/messageBoard/messageBoard'
  import mobileAgentApply from '@/components/modal/mobile_agent_apply'
  import sity_address from '@/js/city-address.js'
  //抛出
  export default {
    name: 'agent',
    components: {
      messageBoard,
      Foot,
      mobileAgentApply
    },
    data(){
      return {
        city_arr: [],
        no_query: true,
        none_agent: true,
        mobile_agent_mask:false,
        mobile_no_agent: true,
        mobile_no_search_agent: true,
        mobile_agent_apply_mask:false,
        pc_province:'',
        pc_city:'',
        pc_cmbarea:'',
        selected_province:'',
        selected_city:'',
        selected_cmbarea:''
      }
    },
    methods: {
      /**
       * pc申请模态框请求验证码
       * **/
      modal_qrcode_btn(e){
        let obj = window.event || e;
        let event_target = obj.target || obj.srcElement;
        let that = this;
        let agent_tel = $("#agent_tel").val();
        let countdown = 60;
        that.base.ajax_post("/site/get/mobile/msg/code", {"phone": agent_tel}, function (data) {
          if (data.status == 0) {
            /**
             * 请求成功，倒计时开始
             * **/
            settime(obj);
            function settime() {
              if (countdown == 0) {
                $(event_target).attr("disabled", false).text("获取验证码").removeClass("bg_B1B3B5").addClass("bg_2577EF");
                countdown = 60;
                return;
              } else {
                $(event_target).attr("disabled", true).text(countdown + "s").removeClass("bg_2577EF").addClass("bg_B1B3B5");
                countdown--;
              }
              setTimeout(function () {
                settime(obj)
              }, 1000)
            }
          } else {
            alert(data.detail)
          }
        });
      },

      /**
       * pc提交模态框申请
       * 成功之后关闭模态框
       * **/
      sub_modal_form(){
        let that = this;
        let agent_name = $("#agent_name").val();
        let agent_tel = $("#agent_tel").val();
        let agent_qrcode = $("#agent_qrcode").val();
        let agent_company = $("#agent_company").val();
        let agent_address = $("#modal_province option:selected").text() + $("#modal_city option:selected").text() + $("#modal_cmbArea option:selected").text();
        if (that.checkStringNull(agent_name) == false && that.checkStringNull(agent_tel) == false && that.checkStringNull(agent_qrcode) == false) {
          that.base.ajax_post('/mdp/applicant/join/shop', {
            "name": agent_name,
            "phone": agent_tel,
            "code": agent_qrcode,
            "title": agent_company,
            'address': agent_address
          }, function (data) {
            if (data.status == 0) {
              $('#myModal').modal('hide');
              $.toast("申请成功", "1000");
            } else {
              alert(data.detail)
            }
          })
        } else {
          alert("请完善信息再提交")
        }
      },

      /**
       * PC、mobile
       * 加盟商查询
       * **/
      searchAgent(province,city,country){
        let that = this;
        //获取省，市，县
        let select_str = province + city + country;
        that.base.ajax_get('/site/new/join/shop?select=' + select_str, function (data) {
          if (data.status == 0) {
            if (data.detail.length !== 0) {
              //pc
              that.city_arr = data.detail;
              that.none_agent = false;
              //mobile
              that.mobile_no_agent = false;
              that.mobile_no_search_agent = false;
            } else if (data.detail.length == 0){
              //pc
              that.no_query = false;
              that.none_agent = true;
              //mobile
              that.mobile_no_search_agent = false;
              that.mobile_no_agent = true;
              that.city_arr = [];
            }
          } else {
            alert(data.detail);
          }
        })
      },


      /**
       * 移动端点击申请成为加盟商
       * **/
      mobile_shearch_agent_btn(){
          let that = this;
          that.mobile_agent_apply_mask = true;
          $(".mobile_agent_apply_modal").animate({"height": '420px'}, '500', 'swing');

      },

      /**
       * 点击关闭加盟商申请
       * **/
      close_agent_apply(res){
          let that = this;
          that.mobile_agent_apply_mask = false;
          console.log("关闭加盟商申请")
      }
    },
    //在模板渲染之前调用
    created (){

    },
    //在模板渲染之后调用
    mounted () {
        //三级联动
      sity_address.address('dfshop_store_province','dfshop_store_city','cmbArea');
      sity_address.address('mobile_agent_province','mobile_agent_city','mobile_agent_cmbArea');
    }
  }


</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  ::-webkit-scrollbar { /*隐藏滚轮*/
    display: none;
  }
  .banner_agent{
    position: relative;
  }
  .banner_agent_btn{
    position: absolute;
    width: 200px;
    height: 36px;
    top: 64%;
    left: 43%;
    opacity: 0;
  }
  .banner_agent img{
    width: 100%;
    height: 100%;
  }
  .agent_modal_body .form-group{
    padding: 0 15px;
  }
  .agent_label_title{
    float: left;
    font-size: 14px;
    width: 90px;
    text-align: left;
  }
  .agent_inp_box{
    float: left;
    width: calc(100% - 90px);
  }
  .modal_qrcode_box button{
    width: 140px;
    height: 34px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    margin-left: -3px;
  }
  .modal_qrcode_box input{
    display: inline;
    margin-right: -3px;
    width: calc(100% - 144px);
  }
  .modal_city_select select{
    display: inline;
    width: calc(33.333% - 10px);
    height: 40px;
    line-height: 40px;
  }
  .modal_sub_bottom{
    width: 320px;
    margin: 0 auto;
  }
  .modal_sub_bottom p{
    margin: 0;
  }
  .sub_modal_agent{
    width: 100%;
    height: 40px;
    line-height: 40px;
    border-radius: 2px;
  }

  .join_interests,.jion_aptitude,.jion_counsel,.join_flow{
    padding: 60px 0;
  }
  .item_interests{
    margin-top: 52px;
  }
  .item_interests img{
    width: 140px;
    height: 140px;
  }
  .aptitude_box{
    width: 100%;
  }
  .item_aptitude{
    float: left;
    width: calc(25% - 20px);
    width: -moz-calc(25% - 20px);
    width: -webkit-calc(25% - 20px);
    padding: 40px 30px;
    margin-left: 10px;
    margin-right: 10px;
  }
  .item_aptitude :first-child{
    margin-left: 0;
  }
  .item_aptitude img{
    width: 60px;
    height: 60px;
  }
  .query_box{
    margin-top: 40px;
  }
  .line_color{
    width: 30px;
    margin: 20px auto 0 auto;
    height: 2px;
    background-color: #2577EF;
  }
  .city_select_box span{
    margin-left: 7px;
    margin-right: 7px;
  }
  .city_select_box select{
    width: 240px;
    height: 40px;
    line-height: 40px;
  }
  .search_city_btn{
    width: 240px;
    height: 40px;
    line-height: 40px;
    background-color: #2577EF;
    border: none;
    margin-left: 20px;
  }
  .city_list_box{
    width: 100%;
    height: 250px;
    overflow-y: scroll;
    padding: 0 80px 40px 80px;
    border: 1px solid #cccccc;
    border-radius: 4px;
  }
  .city_list_box li{
    width: calc(50% - 20px);
    width: -moz-calc(50% - 20px);
    width: -webkit-calc(50% - 20px);
    box-shadow: 0px 2px 10px #EAECF0;
    padding: 25px 24px;
    margin-left: 20px;
    margin-top: 40px;
  }
  .city_list_box li:first-child{
    margin-left: 0;
  }
  .enterprise_img{
    width: 40px;
    height: 40px;
  }
  .enterprise_name{
    margin-bottom: 0;
    margin-top: 0;
    width: calc(100% - 55px);
    width: -moz-calc(100% - 55px);
    width: -webkit-calc(100% - 55px);
  }
  .join_flow{
    background: url("http://image.xuemei99.com/process_bg_jiameng.jpg") no-repeat center;
    background-size: cover;
  }
  .flow_box{
    padding-left: 20px;
    padding-right: 20px;
  }
  .flow_img_box,.flow_right_icon{
    float: left;
  }
  .flow_img_box{
    width: 120px;
  }
  .flow_img_box img{
    width: 120px;
    height: 120px;
  }
  .flow_img_box p{
    margin-top: 20px;
    font-size: 18px;
  }
  .flow_right_icon{
    width: calc(33.333% - 160px);
    width: -moz-calc(33.333% - 160px);
    width: -webkit-calc(33.333% - 160px);
    height: 120px;
    background: url("http://image.xuemei99.com/next_icon_jiameng.png") no-repeat center;
    background-size: 1em;
  }
  .join_daili_btn{
    width: 200px;
    height: 36px;
    line-height: 36px;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
  }
  .join_modal_content{
    width: 544px;
  }
  .no_agent_box {
    width: 1180px;
    border-radius: 4px;
    height: 250px;
    margin: 24px auto 0 auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    border: 1px solid #CCCCCC;
  }
  .mobile_agent_banner_bg{
    background-image: url("http://image.xuemei99.com/mobile_banner_pic_jiameng.jpg");
  }

  .mobile_agent_modal {

  }
  .mobile_agent_modal_body{
    padding: 20px 15px;
  }
  .mobile_city_select select{
    display: inline-block;
    padding: 6px;
    width: calc(33.333% - 16px);
  }
  .mobile_city_select span{
    width: 15px;
    display: inline-block;
  }
  .mobile_agent_search{
    width: 100%;
    height: 36px;
    line-height: 36px;
    border-radius: 2px;
  }
  .mobile_agent_list{
    padding: 10px;
    width: 100%;
    border-radius: 4px;
    border: 1px solid #999999;
    height: 300px;
    overflow-y: scroll;
  }
  .mobile_agent_list li{
    width: 100%;
    margin-top: 20px;
    box-shadow: 0px 2px 8px rgba(34, 35, 36, 0.15);
    border-radius: 2px;
    padding: 10px;
  }
  .mobile_agent_list li:first-child{
    margin-top: 0;
  }
  .mobile_agent_enterprise {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }
  .mobile_agent_logo{
    width: 40px;
    height: 40px;
    background-image: url("http://image.xuemei99.com/company_icon_jiameng.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
  }
  .mobile_agent_name{
    width: calc(100% - 40px);
    padding-left: 10px;
  }
  .mobile_no_agent{
    height: 300px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
  }
  .mobile_no_agent p{
    width: 100%;
  }
  .mobile_no_agent_txt{
    width: 100%;
  }
</style>
